<template>
  <div class="page">
    <global-header title="房间设置" @back="$router.back()" />
    <main class="page-main">
      <van-cell-group>
        <van-cell :title="item.label" v-for="item in list">
          <template #value>
            <div class="w-full flex justify-end">
              <van-switch
                class="!text-[22px]"
                :model-value="item.value"
                :active-value="1"
                :inactive-value="0"
                @change="handleSwitch(item)"
              />
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </main>
  </div>
</template>
<route>
  {
    name: "admin-setting-room",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import { reqBasisConfigEdit } from "@/api/setting";
import { useRoomStore } from "@/store/modules/room";
import { toast } from "@/utils/toast";
import { cloneDeep, debounce } from "lodash-es";
import { storeToRefs } from "pinia";

type ListItem = {
  label: string;
  value: number;
  keyName: BasisConfigKeys | "ApplyVoice";
};

const roomStore = useRoomStore();
const { roomInfo, applyVoice } = storeToRefs(roomStore);
const list = ref<ListItem[]>([
  { label: "入群审核", value: 0, keyName: "IncomeExamine" },
  { label: "上下分和入群提示音", value: 0, keyName: "ApplyVoice" },
  { label: "龙虎和结算方式", value: 0, keyName: "LhhStatus" },
  { label: "自助回水", value: 0, keyName: "Backwater" },
  { label: "游戏赔率", value: 0, keyName: "PlStatus" },
  { label: "会员流水", value: 0, keyName: "LsStatus" },
  { label: "网投键盘", value: 0, keyName: "JpStatus" },
  { label: "下注成功回复消息", value: 0, keyName: "XzStatus" },
  { label: "开启公告显示", value: 0, keyName: "FjggStatus" },
  { label: "订单内容简化显示", value: 0, keyName: "SimplifyOrder" },
  { label: "回复非订单指令消息", value: 0, keyName: "MustReply" },
  { label: "发送当期开奖图", value: 0, keyName: "ShowPic1" },
  { label: "发送近期开奖图一", value: 0, keyName: "ShowPic2" },
  { label: "允许重复上下分", value: 0, keyName: "SxfStatus" },
  { label: "显示流水", value: 0, keyName: "ShowWater" },
  { label: "群内闲聊", value: 0, keyName: "GroupChat" },
  { label: "下注弹窗", value: 0, keyName: "BetPop" },
  { label: "代理报表下线流水详情", value: 0, keyName: "DlbbStatus" },
  { label: "是否开启跟投功能", value: 0, keyName: "ShowFllow" }
]);

const setBasisData = () => {
  if (roomInfo.value) {
    const arr = cloneDeep(list.value);
    arr.forEach(item => {
      if (item.keyName == "ApplyVoice") {
        item.value = applyVoice.value;
      } else {
        const typedKey = item.keyName as BasisConfigKeys;
        if (typedKey in roomInfo.value! && roomInfo.value![typedKey] !== undefined) {
          item.value = roomInfo.value![typedKey] as number;
        }
      }
    });
    list.value = cloneDeep(arr);
  }
};

const handleSwitch = debounce(
  async (item: ListItem) => {
    if (item.keyName == "ApplyVoice") {
      applyVoice.value = item.value;
      return;
    }
    try {
      await reqBasisConfigEdit({
        [item.keyName]: item.value == 1 ? 0 : 1
      });
      toast.info("设置成功");
      const arr = cloneDeep(list.value);
      arr.forEach(jtem => {
        if (jtem.keyName == item.keyName) {
          jtem.value = item.value == 1 ? 0 : 1;
        }
      });
      list.value = cloneDeep(arr);
      if (roomInfo.value) {
        roomInfo.value = cloneDeep({
          ...roomInfo.value,
          [item.keyName]: item.value == 1 ? 0 : 1
        });
      }
    } catch (error) {
      console.log(error);
    }
  },
  500,
  { leading: true, trailing: false }
);

watch(() => roomInfo.value, setBasisData, { deep: true });
watch(() => applyVoice.value, setBasisData, { deep: true });

onMounted(() => {
  setBasisData();
});
</script>
